<template>
  <div class="_wrap">
    <subTit title="历年食堂支出金额趋势"/>
    <div class="chartBox">
      <eChart :option="option"></eChart>
    </div>
  </div>
</template>

<script>
  import subTit from '../components/subTit'
  export default {
    name: 'itemRightBottom',
    components: { subTit },
    data() {
      return {
        option: {}
      }
    },
    mounted() {
      let obj = {
        xAxisData: ['2019年', '2020年', '2021年', '2022年', '2023年'],
        seriesData: [28952, 29853, 31695, 33364, 32452]
      }
      this.option = this.getOption(obj)
    },
    methods: {
      getOption({xAxisData, seriesData}){
        return {
          // color: {
          //   type: 'linear',
          //   x: 0,
          //   y: 0,
          //   x2: 0,
          //   y2: 1,
          //   colorStops: [{
          //     offset: 0, color: 'rgba(8,132,255, 1)' // 0% 处的颜色
          //   }, {
          //     offset: 1, color: 'rgba(8,132,255, .1)' // 100% 处的颜色
          //   }],
          //   global: false // 缺省为 false
          // },
          color: ['#33EDFD'],
          grid: {
            left: '5px',
            right: '10px',
            top: '70px',
            bottom: '20px',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            formatter: (params) => {
              let html = ''
              for (let i = 0; i < params.length; i++) {
                const formatNum = (value) => {
                  if(!value&&value!==0) return 0;
                  let str = value.toString();
                  let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
                  return str.replace(reg,"$1,");
                }
                let val = params[i].value ? params[i].value : 0
                let name = i===0 ? `<div>${params[i].name}</div>` : ''
                html += `
                  <div class="tooltip">
                    ${name}
                    <div class="item">
                        <div class="${i>1?'marker':''}">${params[i].marker}</div>${params[i].seriesName}<span>${formatNum(val)}</span>万元
                    </div>
                  </div>
                `
              }
              return html
            },
            textStyle: {
              // fontSize: 32,
              color: '#fff'
            },
            borderColor: 'rgba(0,161,255,0.42)', // transparent
            backgroundColor: ' rgba(1,33,59,0.65)', // transparent
            padding: [5, 10]
          },
          xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: xAxisData,

            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: 'rgba(255,255,255, .16)',
              }
            },
            axisLabel: {
              // rotate: -30,
              interval: 0,
              fontSize: 14,
              color: 'rgba(255,255,255,0.8)'
            }
          },
          yAxis: [
            {
              name: '万元',
              type: 'value',
              min: 0,
              // max: 500,
              // interval: 100,
              nameTextStyle: {
                align: 'center',
                fontSize: 16,
                color: '#fff'
              },
              axisLabel: {
                formatter: '{value}',
                fontSize: 14,
                color: 'rgba(255,255,255,0.8)'
              },
              splitLine: {
                show: true, // 是否显示分隔线
                lineStyle: {
                  color: 'rgba(255,255,255,0.16)',
                  type: 'dashed',
                  width: 1
                }
              },
              axisLine: {
                show: false
              },
              splitArea: {
                show: false // 是否显示分隔区域
              }
            },
          ],
          series: [
            {
              name: '支出金额',
              data: seriesData,
              type: 'bar',
              barMaxWidth: 10,
              itemStyle: {
                //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                barBorderRadius:[0, 0, 0, 0]
              },
              label: {
                show: true,
                position: 'top',
                color: '#fff',
                fontSize: 16,
                fontFamily: 'DINPro'
              },
            }
          ]
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  ._wrap {
    .chartBox { height: 338px; }
    ::v-deep .tooltip {
      .item {
        display: flex; align-items: center; color: rgba(255,255,255,.8);
        .marker { visibility:hidden }
        span { color: #00FFFA; font-family: DINPro; font-size: 16px; margin: 0 6px; }
      }
    }
  }
</style>
